%script{src: "/js/swfupload.js"}
%script{src: "/js/jquery-swfupload-min.js"}
.row
  %form.form-horizontal.span6{id: 'upload-form', action: '/api/v1/upload', method: 'post'}
    .control-group
      %label.control-label Select File:
      .controls
        %div{:id=> "swfupload-control"}
          %ol{:id=> "log"}
          %span{:id=> "span-button-placeholder"}
          %span{id: 'file-name-placeholder'}
    .control-group.hideable
      %label.control-label Display Type:
      .controls
        %label.radio.inline
          %input{name: 'shortener[type]', type: 'radio', value: 'video'}
            Video
        %label.radio.inline
          %input{name: 'shortener[type]', type: 'radio', value: 'audio'}
          Audio
        %label.radio.inline
          %input{name: 'shortener[type]', type: 'radio', value: 'image'}
          Image
        %label.radio.inline
          %input{name: 'shortener[type]', type: 'radio', value: 'download'}
          Download
    .control-group.hideable
      %label.control-label{for: 'shorterner[name]'} Name
      .controls
        %input{type: 'text', name: 'shortener[name]'}
    .control-group.hideable
      %label.control-label{for: 'shorterner[description]'} Description
      .controls
        %input{type: 'text', name: 'shortener[description]'}
    .form-actions.hideable
      %input.btn-primary{type: 'submit', value: 'Shorten'}
    .row
      #progressbar.span4.offset1{style: 'display:none;'}
        .progress.progress-danger.active.progress-striped
          .bar{style: "width: 0%"}

#display-up-new-shorts{class: boxify_class(nil, nil, 'container')}

:javascript
  $(function(){
    $('#swfupload-control').swfupload({
      // Backend Settings
      upload_url: "#{@upload_url}",
      http_success : [ 200, 201, 204 ],     // FOR AWS

      // File Upload Settings
      file_size_limit : "102400", // 100MB
      file_types : "*.*",
      file_types_description : "All Files",
      file_upload_limit : "10",
      file_queue_limit : "0",
      file_post_name : "file",        // FOR AWS

      // Button settings
      button_image_url : "/images/XPButtonUploadText_61x22.png",
      button_placeholder_id : "span-button-placeholder",
      button_width: 61,
      button_height: 22,

      // Flash Settings
      flash_url : "/flash/swfupload.swf",
      //debug: true,
      post_params: #{@post.to_json}   // FOR AWS

    })
    .bind('fileQueued', function(event, file){
      $(this).swfupload('setButtonDisabled', true);
      $('#file-name-placeholder').text(file.name);
    })
    .bind('uploadStart', function(event, file){
      $('#progressbar').show();
      $('.hideable').hide();
      $('.form-actions').hide();
    })
    .bind('uploadProgress', function(event, file, bytesLoaded){
      var avg = bytesLoaded / file.size * 100;
      $('#progressbar .bar').css('width', avg + '%' );
    })
    .bind('uploadSuccess', function(event, file, serverData){
      var values = $('#upload-form').serialize();
      values += '&shortener%5bfile_name%5d=' + file.name;
      $.post('/api/v1/upload', values, function(data){
        $('#display-up-new-shorts').append(data.html)
      });

    })
    .bind('uploadComplete', function(event, file){
      $('#progressbar .bar').css('width', '100%')
      $('#progressbar .active').removeClass('active');
      $('.control-group').hide();
    })

    $('#upload-form').submit(function(e){
      e.preventDefault();
      $('#swfupload-control').swfupload('startUpload');
    });
  });

